<html>
  <head>
    <meta charset="utf-8">
    <title>This site can't be reached</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1">
    <style type="text/css">
      #logo{
        margin: auto;
        display: block;
        padding:48px 0px;
      }
      #search{
        display: flex;
        max-width: 640px;
        width: 100%;
        margin: auto;
      }
      #url{
        height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        outline: 0;
        border-radius: 10px 0 0 10px;
        border: 2px solid #4285f4;
        background: #fff;
        color:#4285f4;
        margin:0;
        border-right:none;
        width:100%;
      }
      #url:focus{
        border-color: #fbbc05;
        opacity: 1;
      }
      #submit{
        margin: 0;
        cursor: pointer;
        width: 108px;
        background-color: #ea4335;
        border-radius: 0 10px 10px 0;
        font-size: 17px;
        color: #fff;
        outline:0;
        border: none;
      }
      #submit:hover{
        background-color: #34a853;
      }
      #debug{
        max-width: 640px;
        width: 100%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <img id="logo" hidefocus="true" src="google_logo.svg">
      <div id="search">
        <input type="text" id="url" placeholder="Search Google or type a URL that can't be reached"/>
        <button id="submit">Go</button>
      </div>
      <div id="debug"></div>
    </div>
    <script type="text/javascript" src="../javascript-http-get/get.js"></script>
    <script type="text/javascript">
      "use strict"
      function init(){
        document.getElementById("submit").addEventListener("click",onSubmit)
        document.getElementById("url").addEventListener("keydown",onKeyDown)
        function onKeyDown(event){
          if(event.keyCode===13){
            onSubmit()}}
        function browseURL(url){
          let debug=document.getElementById("debug")
          get({
            url:url,
            onReadyStateChange:function(event){
              let request=event.currentTarget
              if(request.readyState===3){return}
              let currentURL=request.responseURL
              if(!currentURL){currentURL=url}
              let text=[currentURL,request.readyState,request.status].join(" ")
              console.log(text)
              debug.innerText=debug.innerText+text+"\n"
            },
            onLoad:function(text){
              document.write(text)
          }})
        }
        function onSubmit(event){
          let url=document.getElementById("url").value
          if(url===""){
            return browseURL("https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347")}
          if(!isValidURL(url)){
            return browseURL("https://www.google.com/search?q="+url)}
          browseURL(url)
        }
        function isValidURL(url){
          try{return new URL(url)}
          catch(error){return false}}
      }
      init()
    </script>
  </body>
</html>
